<template>
  <el-dialog
    v-model="_isOpen"
    width="520"
    align-center
    :show-close="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="cancelClick"
  >
    <div class="alert_dialog">
      <div class="content">
        <img src="@/assets/images/red_alert.png" />
        <div class="content_text">
          <span v-if="detail.process === 1"> 当前合同正在审批中，请勿重复提交 </span>
          <span v-else>
            生成合同错误，当前无法生成合同！预算编码：{{
              detail.budgetCustomNo
            }}系统识别到编码值与系统校验冲突，请谨慎修改后从新发起合同！
          </span>
        </div>
        <div class="dialog-footer">
          <el-button v-if="detail.isApproval === 1" @click="cancelClick" class="space_param_btn" style="background: whitesmoke">
            取消
          </el-button>
          <el-button
            v-if="detail.isApproval === 1 && detail.process !== 1 && detail.process !== 2"
            type="primary"
            @click="commitClick"
            class="space_param_btn"
            style="background: #424e66"
            >提交审批</el-button
          >
          <el-button
            v-if="detail.isApproval === 0 || detail.process === 1"
            type="primary"
            @click="cancelClick"
            class="space_param_btn"
            style="background: #424e66"
            >我知道了</el-button
          >
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { computed } from "vue";
const props = defineProps({
  modelValue: () => false,
  detail: { type: Object, default: () => ({}) }
});

const emit = defineEmits(["update:modelValue", "commit"]);

const _isOpen = computed(() => {
  return props.modelValue;
});

const commitClick = () => {
  emit("commit");
};

const cancelClick = () => {
  emit("update:modelValue", false);
};
</script>
<style lang="scss">
.alert_dialog {
  .content {
    text-align: center;
    .content_text {
      margin-top: 40px;
      color: 1a1a1a;
      line-height: 20px;
    }
    .dialog-footer {
      margin-top: 30px;
    }
  }
}
</style>
